<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-07-22 11:04:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-20 09:54:44
 * @Description: 应用详情
 -->
<template>
  <fks-dialog
    :append-to-body="true"
    :visible.sync="show"
    width="960px"
    @close="close"
  >
    <div slot="title">
      <i
        v-if="title == LANG.ADD"
        class="fks-icon-plus"
      />
      <i
        v-if="title == LANG.EDIT"
        class="fks-icon-edit"
      />
      {{ title }}
    </div>
    <fks-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="95px"
    >
      <fks-form-item
        :span="12"
        lead
        :label="LANG.CLIENT_NAME"
        prop="clientName"
      >
        <fks-input
          v-model="form.clientName"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        :label="LANG.REDIRECT_URL"
        prop="webServerRedirectUri"
      >
        <span slot="label">
          <span>{{ LANG.REDIRECT_URL }}</span>
          <fks-tooltip>
            <div
              slot="content"
              class="tips-container"
            >
              {{ LANG.REDIRECT_URL_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </span>
        <fks-input
          v-model="form.webServerRedirectUri"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="title == LANG.EDIT"
        :span="12"
        lead
        :label="LANG.CLIENT_ID"
        prop="clientId"
      >
        <fks-input
          v-model="form.clientId"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="title == LANG.EDIT"
        :span="12"
        :label="LANG.CLIENT_SECRET"
        prop="clientSecret"
      >
        <fks-input
          v-model="form.clientSecret"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        :label="LANG.TENANT_NAME"
        prop="tenantId"
      >
        <fks-select
          v-model="form.tenantId"
          clearable
          style="width: 100%"
          :placeholder="LANG.TENANT_PLACEHOLDER"
        >
          <fks-option
            v-for="item in tenantList"
            :key="item.tenantId"
            style="width: 440px"
            :label="item.tenantName"
            :value="item.tenantId"
          />
        </fks-select>
      </fks-form-item>
    </fks-form>
    <template slot="footer">
      <fks-button
        type="primary"
        icon-class="submit"
        :loading="clientLoading"
        icon="fks-icon-check"
        @click="submit"
      >
        {{ LANG.SAVE }}
      </fks-button>
    </template>
  </fks-dialog>
</template>
<script>
import * as Client from '../api'
import * as Tenant from '../api'
export default {
  name: 'ClientDetail',
  components: {},
  props: {
    data: {
      type: Object,
      default() {
        return {
          clientName: ''
        }
      }
    },
    type: {
      type: String,
      default: 'add'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: this.data,
      clientLoading: false,
      show: this.visible,
      tenantList: []
    }
  },
  computed: {
    title() {
      switch (this.type) {
        case 'add':
          return this.LANG.ADD
        case 'view':
          return this.LANG.VIEW
        default:
          return this.LANG.EDIT
      }
    },
    //验证规则
    rules() {
      return {
        clientName: [
          {
            required: true,
            message: this.LANG.CLIENT_NAME_NOT_EMPTY,
            trigger: 'change'
          }
        ],
        clientId: [
          {
            required: true,
            message: this.LANG.CLIENT_ID_RULE,
            trigger: 'change'
          }
        ],
        clientSecret: [
          {
            required: true,
            message: this.LANG.CLIENT_SECRET_NOT_EMPTY,
            trigger: 'change'
          }
        ],
        webServerRedirectUri: [
          {
            required: false,
            message: this.LANG.REDIRECT_URL_NOT_EMPTY,
            trigger: 'change'
          },
          {
            pattern: /^https?:\/\/([a-zA-Z0-9\-]+\.)+([a-zA-Z]{2,5})([\/\?#][a-zA-Z0-9`~!@#%&_=;\$\^\*\(\)\-\+\{\}\[\]\:\,\.\?\/\|]*)?$/g,
            message: this.LANG.REDIRECT_URL_PATTERN
          }
        ],
        tenantId: [
          {
            required: true,
            message: this.LANG.TENANT_NOT_EMPTY,
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    visible() {
      this.show = this.visible
    },
    show() {
      this.$emit('update:visible', this.show)
    }
  },
  mounted() {
    //获取系统租户数据
    Tenant.getAllTenants()
      .then((res) => {
        if (res.status) {
          this.tenantList = res.data ? res.data : []
        }
      })
      .catch(() => {
        this.tenantList = []
      })
  },
  methods: {
    //保存应用数据
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.clientLoading = true
          if (this.type == 'add') {
            Client.addClient(this.form)
              .then((res) => {
                this.clientLoading = false
                if (res.status) {
                  this.$message.success(this.LANG.ADD_SUCCESS)
                  this.$parent.getClients() // 更新树结构的数据
                  this.close()
                }
              })
              .catch((error) => {
                this.clientLoading = false
              })
          } else {
            Client.saveClient(this.form)
              .then((res) => {
                this.clientLoading = false
                if (res.status) {
                  this.$message.success(this.LANG.EDIT_SUCCESS)
                  this.$parent.getClients() // 更新树结构的数据
                  this.close()
                }
              })
              .catch((error) => {
                this.clientLoading = false
              })
          }
        }
      })
    },
    //关闭应用弹窗
    close() {
      this.form = {}
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-dialog__body {
  padding-bottom: 0;
}

.tips-container {
  font-size: 14px;
  line-height: 20px;
}
</style>